@page
@model ITAM.Pages.Assets.DeviceModel
@{
    ViewData["Title"] = "设备";
}

<div class="row pr-3 pt-3 pl-3">
    <h5>设备</h5>
    <small class="pt-2px pl-1">主数据列表</small>
</div>
<div class="row pr-3 pl-3">
    <div class="col-md-12 pt-3">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#record">记录清单</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#category">分类列表</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#users">归属用户</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade show active" id="record">
                <div class="mt-3">
                    <a class="btn btn-primary text-light" asp-page="/Assets/AddDevice">新增</a>
                    <a class="btn btn-primary text-light" asp-page="/Assets/ImportDevice">导入</a>
                    <a class="btn btn-primary text-light" asp-page="/Assets/ExportDevie">导出</a>
                    <form class="d-flex mt-3">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">资产编码</th>
                            <th scope="col">设备类型</th>
                            <th scope="col">设备ID</th>
                            <th scope="col">设备状态</th>
                            <th scope="col">IP</th>
                            <th scope="col">MAC</th>
                            <th scope="col">购买日期</th>
                            <th scope="col">过保日期</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.Devices)
                        {
                            <tr class="table-primary">
                                <th scope="row">@item.AssetNumber</th>
                                <td>@item.CategoryName</td>
                                <td>@item.Id</td>
                                <td>@item.State</td>
                                <td>@item.Ip</td>
                                <td>@item.Mac</td>
                                <td>
                                    @(item.PurchasedDate==null?"":((DateTime)item.PurchasedDate).ToString("yyyy-MM-dd"))
                                </td>
                                <td>
                                    @(item.ExpireDate==null?"":((DateTime)item.ExpireDate).ToString("yyyy-MM-dd"))
                                </td>
                                <td>
                                    <a class="text-primary" asp-page="/Assets/EditDevice" asp-route-id="@item.Id">编辑</a>
                                    <a class="text-primary" asp-page="/Assets/EditDevice">删除</a>
                                    <a class="text-primary" asp-page="/Assets/EditDevice">分配用户</a>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
                <div class="float-end">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#">&laquo;</a>
                        </li>
                        <li class="page-item active">
                            <a class="page-link" href="#">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">2</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">4</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">5</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#">&raquo;</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-pane fade" id="category">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Type</th>
                            <th scope="col">设备</th>
                            <th scope="col">设备</th>
                            <th scope="col">设备</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="table-active">
                            <th scope="row">Active</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr>
                            <th scope="row">Default</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-primary">
                            <th scope="row">Primary</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-secondary">
                            <th scope="row">Secondary</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-success">
                            <th scope="row">Success</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-danger">
                            <th scope="row">Danger</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-warning">
                            <th scope="row">Warning</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-info">
                            <th scope="row">Info</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-light">
                            <th scope="row">Light</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-dark">
                            <th scope="row">Dark</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="users">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col">Type</th>
                            <th scope="col">设备</th>
                            <th scope="col">设备</th>
                            <th scope="col">设备</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="table-active">
                            <th scope="row">Active</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr>
                            <th scope="row">Default</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-primary">
                            <th scope="row">Primary</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-secondary">
                            <th scope="row">Secondary</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-success">
                            <th scope="row">Success</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-danger">
                            <th scope="row">Danger</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-warning">
                            <th scope="row">Warning</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-info">
                            <th scope="row">Info</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-light">
                            <th scope="row">Light</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                        <tr class="table-dark">
                            <th scope="row">Dark</th>
                            <td>xxx</td>
                            <td>xxx</td>
                            <td>xxx</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

